<template>
  <div>
    <!-- 导航列表 -->
    <div class="nav">
      <van-tabs color="#07c160" v-model="active" @click="handoff">
        <van-tab v-for="item in listo" :title="item.name" :key="item.id" :name="item._id"></van-tab>
      </van-tabs>
    </div>

    <!-- 列表信息 -->
    <div>
      <router-link replace to="detail">
        <van-row v-for="ios in list" :key="ios.id">
          <van-col span="24" class="clo111">{{ ios.title }}</van-col>

          <van-col span="22" class="col222">
            <div v-for="(ios, index) in ios.imageSrc" :key="index">
              <img :src="ios">
            </div>
          </van-col>
          <div style="border-bottom:2px rgb(216, 119, 177) dotted">
            <van-col span="12" class="col333">作者：{{ ios.author }}</van-col>
            <van-col span="10" class="col333">时间：{{ ios.time | formatDate }}</van-col>
          </div>
        </van-row>
      </router-link>
    </div>

  </div>
</template>

<script>
import { getCate, getArticleList } from '@/api/home.js'
// 上拉加载
import { List } from 'vant';
// 下拉刷新
import { PullRefresh } from 'vant';
import { Toast } from 'vant';
export default {
  data() {
    return {
      listo: [], 
      active: 0,
      times: '',
      list: [],  //文章列表
      cate_id:''
    };
  },
  // 时间戳转换年月日
  filters: {
    formatDate: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      // let h = date.getHours();
      // h = h < 10 ? "0" + h : h;
      // let m = date.getMinutes();
      // m = m < 10 ? "0" + m : m;
      return y + "-" + MM + "-" + d;
      // return y + "-" + MM + "-" + d + " " + h + ":" + m;
    }
  },
  created() {
    this.getCate();

  },
  // 获取刀当前被选择的分类的id
  computed:{

  },
  methods: {

    // 请求头部导航
    getCate() {
      getCate().then(res => {
        console.log(res);
        this.listo = res.data.data
        this.getList()
      })
    },

    // 请求文章列表
    getList() {
      let {cate_id,skip,limit} = this;
      getArticleList({
        cate_id,
        skip,
        limit
      }).then(res => {
        console.log(res)
        // this.list = res.data.data
      })
    },

    // 切换分类
    handoff() {

    },
    // 下拉刷新
    onRefresh() {
      setTimeout((name) => {
        Toast('刷新成功');
        this.isLoading = false;
        this.$http
          .post("/api/get_article_list", {
            cate_id: name,
            skip: 0,
            limit: '10000'
          }).then(res => {
            console.log(res, 11111)
          })
      }, 1000);
    },
  },
  components: {
    [List.name]: List,
    [PullRefresh.name]: PullRefresh
  }
}
</script>

<style scoped lang="less">
.doge {
  float: none;
  width: 140px;
  height: 72px;
  margin-top: 8px;
  border-radius: 4px;
}

.van-col {
  box-sizing: border-box;
  min-height: 1px;
  overflow: hidden;
  word-wrap: break-word;
  display: flex;
  padding-left: 20px;
  margin: 15px 0 10px 0;
}

// .van-col:nth-child(3) {
//   padding-bottom: 8px;
//   border-bottom: 2px rgb(216, 119, 177) dotted;
// }

::v-deep .van-tabs__line {
  position: absolute;
  bottom: 6.5vw;
  left: 0;
  z-index: 1;
  width: 4.66667vw;
  height: 0.8vw;
  border-radius: 0.8vw;
}

li {
  float: left;
  width: 100%;
  list-style: none;
  padding: 10px 0;
}

.iiii {
  position: relative;
  left: 30%;
  color: white;
}

.top {
  width: 100%;
  height: 55px;
  background-color: #07c160;
}

.top input {
  width: 70%;
  text-align: center;
  margin-top: 12px;
  border-radius: 12px;
  border: white;
  height: 30px;
  color: white;
  background: #66d79d;
}

.top .nav {
  display: flex;
  overflow: hidden;
  margin-top: 8px;
}

.nav ul li {
  font-size: 10px;
  padding: 0 4px;
  border-right: 1px solid rgb(212, 209, 209);
  border-bottom: 1px solid rgb(212, 209, 209);
}

img {
  width: 280px;
  height: 250px;
  float: left;
  margin-left: 30px;
  padding-bottom: 20px;
}

.wenben {
  width: 100%;
  text-align: center;

}

.wenben ul li {
  float: left;
  list-style: none;
  padding: 10px 0;
}

.wenben span {
  width: 100%;
  float: left;
}
</style>